<template>
  <div class="button-box">
    <template v-for='(item, index) in btns'>
      <el-button :type='item.type' :disabled='item.disabled' :key="index">{{item.name}}</el-button>
    </template>
  </div>
</template>
<script>
export default {
  name: 'uiButton',
  data() {
    return {
      btns: [
        {type: '', disabled: false, name: '默认按钮'},
        {type: 'primary', disabled: false, name: '主要按钮'},
        {type: 'success', disabled: false, name: '成功按钮'},
        {type: 'info', disabled: false, name: '信息按钮'},
        {type: 'warning', disabled: false, name: '警告按钮'},
        {type: 'danger', disabled: false, name: '危险按钮'},
      ]
    }
  }
}
</script>
<style lang="less">
  .button-box {
    width: 100%;
    .el-button {
      margin-bottom:5px;
      margin-left: 0px;
      margin-right: 5px;
    }
  }
</style>